import React from 'react';
// 1. 导入Provider Consumer组件
// Provider组件用来传递参数(供应者)
// Consumer组件用来接收参数(消费者)
const { Provider, Consumer } = React.createContext()

class Prent extends React.Component {
  // 2. 定义要传递的参数
  state = {
    money: 100000
  }
  render() {
    return (
      // 3. 使用Provider组件将传递数据的组件结构进行包裹
      // 4. 通过value属性绑定传递的数据
      <Provider value={this.state.money}>
        <div>
          <p>父组件</p>
          <hr />
          <Son />
          <hr />
          <Sun />
        </div>
      </Provider>
    )
  }
}

class Son extends React.Component {
  render() {
    return (
      <div>
        <p>子组件</p>
      </div>
    )
  }
}

class Sun extends React.Component {
  render() {
    return (
      // 5. 通过Consumer组件将接收数据的组件结构进行包裹
      <Consumer>
        {/* 6. 回调函数中声明形参, 形参就是传递过来的值, 可以直接使用 */}
        {
          data => (
            <div>
              <p>孙组件</p>
              <p>给了我{ data }元钱</p>
            </div>
          ) 
        }
      </Consumer>
    )
  }
}

export default Prent